<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>败仗庭漂流记第二话-一个真正的国家</title>
        <link href="../css/video-js.min.css" rel="stylesheet" type="text/css">
        <script src="../js/angular.js"></script>
        <script src="../js/video.min.js"></script>
        <script src="https://pv.sohu.com/cityjson"></script>

        <style type="text/css">
            .video_frame {
                margin: 0 auto;
                width: 1000px;
            }

            .video_header {
                width: 1000px;
                height: 140px;
                margin: 0 auto;
            }

            .round_icon {
                width: 40px;
                height: 40px;
                display: flex;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
        </style>

    </head>
    <body ng-app="video_20200330">
        <div class="video_frame">
            <a href="http://www.cute.ac.cn/Index.html">
                <img class="video_header" src="../img/header0.jpg" alt="h">
            </a>
            <div style="padding-bottom: 30px" class="header">
                <h1>[欧陆风云4]拜仗庭漂流记第二话-一个真正的国家</h1>
                <img src="../img/bilibili_icon.png" alt="bili_icon" style="position: relative;top: 13px">
                <a href="https://www.bilibili.com/video/av94237005">B站传送门：av94237005</a>
                <label style="position: relative;right: -450px">发布日期: 2020年3月30日</label>
            </div>
            <video class="video-js vjs-default-skin" controls preload="none" width="1000" height="600" data-setup="{}">
                <source src="../video/20200330.mp4" type='video/mp4' />
            </video>
        </div>

        <div class="talk_frame" style="margin: 0 auto; width: 1000px;">
            <div ng-controller="talk_ctl as tc">
                <h1 style="width: 500px; margin-top: 50px;">评论{{tc.talk_num}}条</h1>
                <input type="button" value="发表评论" style="position:relative; left: 860px; top: -55px; height: 30px;" ng-click="tc.submit_msg()">
                <input type="text" placeholder="小伙伴们快来发表一下你的看法吧" style="position: relative; width: 700px; height: 25px; left: 60px; bottom: 55px" ng-model="tc.talk_msg">
                <div ng-repeat="submit_data in tc.submit_datas track by $index">
                    <img class="round_icon" src={{submit_data.img_src}} alt={{submit_data.img_src}}>
                    <div style="position: relative; left: 65px; bottom: 40px">
                        <label>{{submit_data.id}} 说:</label>
                        <br>
                        <label>{{submit_data.content}}</label>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            angular.module('video_20200330', [])
            .service('ws', [function () {
                self = this;
                WebSocket.prototype.submit_datas = [];
                let _ws = new WebSocket("ws://127.0.0.1:9090/webserver");
                self._w = _ws;
                _ws.onopen = function (ev) {
                    console.log("find server success,try to connect...");
                    _ws.send("root:123456");
                };

                _ws.onmessage = function (ev) {
                    if(ev.data === "congratulation") {
                        console.log("connection established");
                        _ws.send("VIDEOMSG?GET?20200330");
                    }
                    else if(ev.data === "sorry") {
                        console.log("connect failed");
                    }
                    else if(ev.data.split("?")[0] === "VIDEOMSG" && (ev.data.split("?")[1] === "SEND") && (ev.data.split("?")[2] === "20200330")){
                        let ev_data = ev.data.split("?");
                        ev_data.splice(0, 3);
                        _ws.submit_datas = ev_data.join("?");
                        console.log(_ws);
                    }
                };

                self.send_video_msg = function (json_data) {
                    _ws.send(json_data);
                };

                self.get_video_msg = function () {
                    return angular.fromJson(_ws.submit_datas);
                }
            }])
            .controller('talk_ctl',['$interval' ,'ws', function ($interval, ws) {
                self = this;
                self.talk_num = 0;
                self.submit_datas = [];

                $interval(function () {
                    self.submit_datas = ws.get_video_msg();
                    self.talk_num = self.submit_datas.length;
                }, 1000, 2);

                self.talk_msg = '';
                self.submit_msg = function () {
                    if(self.talk_msg.length === 0) {
                        window.alert("没有输入任何评论哦");
                        return;
                    }

                    self.talk_id = returnCitySN.cip + " " + "的小伙伴";
                    self.img_src = "../img/head_icon/pic" + Math.floor(Math.random()*10) + ".jpeg";
                    self.submit_datas.push({id:self.talk_id, content:self.talk_msg, img_src:self.img_src});
                    self.talk_num++;
                    ws.send_video_msg("VIDEOMSG?" + "SAVE?" + "20200330?" + angular.toJson({id:self.talk_id, content:self.talk_msg, img_src:self.img_src}));
                };

            }]);
        </script>

    </body>
</html>
